<template>
	<view class="wodeGoods">
		<view class="wodeGoods_title">
			<!-- <uni-nav-bar :border="false" background-color="#FF4C2A" color="#fff" fixed left-icon="left" title="我的订单"
				@clickLeft="back" /> -->
			<view class="wodeGoods_box_tab">
				<view :class="numTab === index?'wodeGoods_box_list flag':'wodeGoods_box_list'"
					v-for="(item,index) in wodeGoodsList" :key="index" @click="numTabFun(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="wodeGoods_">
			<view class="wodeGoods_box">
				<swiper class="swiper" :duration="500" style="height: 84vh;" @change="swiperFun" :current="numTab">
					<swiper-item class="wodeGoods_box_item" style="height: 100%;" v-for="(item,index) in wodeGoodsList"
						:key="index">
						<scroll-view class="scroll-view_H" :scroll-y="true" style="height: 100%;"
							@scrolltolower="scrolltolowerFun" scroll-left="120">
							<uni-card class="wodeGoods_box_item_card" v-for="(item,index) in list" :key="index"
								:title="item.ordersn" :extra="item.statusstr" @click="gotoOrderDetailsFun(item.id)">
								<view class="wodeGoods_box_item_card_box">
									<view class="wodeGoods_box_item_card_box_ left">
										<image :src="item.goods[0].goods[0].thumb" mode=""></image>
									</view>
									<view class="wodeGoods_box_item_card_box_ right">
										<view class="right_top">
											<view class="right_top_left">
												{{item.goods[0].goods[0].title}}
											</view>
											<view class="right_top_right">
												<view class="">￥{{item.price}}</view>
												<view class="">x{{item.goods_num}}</view>
											</view>
										</view>
										<view class="right_bottom">

											<view class="goods_num_p" v-if="item.status !== '0'">
												共{{item.goods_num}}商品&nbsp;&nbsp;&nbsp;实付：<span
													style="color:#FF4C2A;">{{item.price}}</span>
											</view>

											<view class="dfk" v-if="item.status === '0'">
												<!-- 	<view class="dfk_ qxdd" @click.stop="order_op_cancelFun(item.id)">取消订单
											</view> -->
												<view class="dfk_ qxdd" @click.stop="cancelorderOpen(item.id)">取消订单
												</view>
												<view class="dfk_ zfdd" @click.stop="gotopay(item.id)">支付订单</view>
											</view>

											<view class="dsh" v-if="item.status === '2'">
												<view class="dsh_ ckly">查看物流</view>
												<view class="dsh_ qrsh" @click="order_op_finishFun(item.id)">确认收货</view>
											</view>
										</view>
									</view>
								</view>
							</uni-card>

						</scroll-view>

					</swiper-item>
				</swiper>
			</view>
		</view>


		<uni-popup ref="cancelorder" background-color="#fff" @change="cancelorderchange">
			<view class="cancelorder_box">
				<view class="">
					<view class="cancelorder_box_item" @click.stop="order_op_cancelFun(item)"
						v-for="(item,index) in cancelcause" :key="index"
						:style="index === 1?'border-top: 1rpx solid #cfcfcf;border-bottom: 1rpx solid #cfcfcf;':''">
						{{item}}
					</view>
				</view>
				<view class="cancelorder_box_cancel" @click.stop="cancelorderclose">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		order_get_list,
		order_op_cancel, //取消订单
		order_op_finish, //确认收货
	} from "@/api/member.js"
	export default {
		data() {
			return {
				numTab: 0,
				openid: '',
				page: 1,
				status: '',
				cancelcause: [
					'我不想买了',
					'信息填写错误，重新拍',
					'其他原因'
				],
				wodeGoodsList: [{
						title: '全部',
						status: ''
					},
					{
						title: '待付款',
						status: '0'
					},
					{
						title: '待发货',
						status: '1'
					},
					{
						title: '已完成',
						status: '3'
					}
				],
				list: [],
				deleteId: '',
				isload: true
			};
		},
		onLoad(e) {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.order_get_listFun(e.type === undefined ? '' : e.type);
					this.numTab = e.type * 1 + 1;
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		watch: {
			numTab(r, e) {
				// this.page = 1;
				this.list = [];
				this.isload = true;
			}
		},
		methods: {
			scrolltolowerFun() {
				if (this.isload) {
					this.page++;
				}
				if (this.numTab === 0) {
					this.order_get_listFun();
				} else {
					this.order_get_listFun(this.numTab - 1);
				}
			},
			gotoOrderDetailsFun(id) {
				uni.navigateTo({
					url: `/pages/member/wodeGoods/orderDetails/orderDetails?id=${id}`
				})
			},
			cancelorderchange(e) {
				console.log(e);
			},
			cancelorderOpen(e) {
				this.deleteId = e;
				this.$refs.cancelorder.open('bottom');
			},
			cancelorderclose() {
				this.$refs.cancelorder.close()
			},
			//确认收获
			async order_op_finishFun(orderid) {
				let up = {
					openid: this.openid,
					orderid
				}
				let data = await order_op_finish(up)
				if (this.numTab === 0) {
					this.order_get_listFun();
				} else {
					this.order_get_listFun(this.numTab - 1);
				}
			},
			gotopay(id) {
				uni.navigateTo({
					url: `/pages/confirm_an_order/cashierDesk/cashierDesk?orderid=${id}`
				})
			},

			//取消订单
			async order_op_cancelFun(e) {
				let up = {
					openid: this.openid,
					id: this.deleteId,
					remark: e
				}
				let data = await order_op_cancel(up);
				if (data.status === 1) {
					if (this.numTab === 0) {
						this.order_get_listFun();
					} else {
						this.order_get_listFun(this.numTab - 1);
					}
					this.$refs.cancelorder.close();
				}
			},
			swiperFun(e) {
				this.numTab = e.detail.current;
				this.page = 1;
				this.order_get_listFun(this.wodeGoodsList[e.detail.current].status);
			},
			numTabFun(num) {
				this.numTab = num;
				this.page = 1;
				this.order_get_listFun(this.wodeGoodsList[num].status);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},




			async order_get_listFun(status = '') {
				let up = {
					openid: this.openid,
					page: this.page,
					status
				}
				let data = await order_get_list(up);
				console.log(this.page);
				if (data.result.list.length === 0) {
					this.isload = false
					return
				}

				if (data.result.list.length > 0) {
					data.result.list.forEach(item => {
						this.list.push(item);
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.cancelorder_box {
		width: 100%;
		min-height: 400rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		text-align: center;
		padding-top: 30rpx;

		.cancelorder_box_item {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #666;
		}

		.cancelorder_box_cancel {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			border-top: 1rpx solid #ccc;
		}

	}






	.wodeGoods {
		width: 100%;
		// height: 100vh;
		display: flex;
		flex-direction: column;

		.wodeGoods_title {
			width: 100%;
			padding-top: var(--status-bar-height);
			background-color: #FF4C2A;
			position: fixed;
			top: 0;
			z-index: 100;

			.wodeGoods_box_tab {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;

				.wodeGoods_box_list {
					color: #fff;
					font-size: 26rpx;
					flex: 1;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
				}

				.flag {
					color: #FF4C2A;
					// padding: 10rpx 20rpx;
					background-color: rgb(210, 213, 236);
					border-radius: 10rpx;
				}
			}
		}

		.wodeGoods_ {
			width: 100%;
			flex: 1;
			margin-top: var(--status-bar-height);
			padding: 180rpx 0 0 0;

			.wodeGoods_box {
				width: 100%;

				.wodeGoods_box_item {
					width: 100%;
					height: 100%;
					overflow-y: auto;

					.wodeGoods_box_item_card {
						height: 380rpx;

						.wodeGoods_box_item_card_box {
							width: 100%;
							height: 100%;
							display: flex;

							.wodeGoods_box_item_card_box_ {
								width: 260rpx;
								height: 100%;

								image {
									width: 240rpx;
									height: 240rpx;
									border-radius: 10rpx;
								}
							}

							.right {
								flex: 1;
								height: 240rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.right_top {
									width: 100%;
									height: 100rpx;
									display: flex;
									justify-content: space-between;

									.right_top_left {
										width: 50%;
										height: 100%;
										font-size: 20rpx;
										line-height: 32rpx;
										text-overflow: ellipsis;
									}

									.right_top_right {
										width: 50%;
										height: 100%;
										text-align: right;
										white-space: nowrap;
										text-overflow: ellipsis;
										overflow: hidden;
									}
								}

								.right_bottom {
									width: 100%;
									text-align: right;

									.dfk {
										width: 100%;
										display: flex;
										justify-content: space-between;
										text-align: center;
										font-size: 25rpx;

										.dfk_ {
											width: 45%;
											height: 56rpx;
											line-height: 56rpx;
											border-radius: 10rpx;
										}

										.qxdd {
											background-color: #ccc;
											color: #666;
										}

										.zfdd {
											background-color: #FF4C2A;
											color: #fff;
										}
									}

									.dsh {
										width: 100%;
										display: flex;
										justify-content: space-between;
										text-align: center;
										font-size: 25rpx;

										.dsh_ {
											width: 45%;
											height: 56rpx;
											line-height: 56rpx;
											border-radius: 10rpx;
											background-color: #FF4C2A;
											color: #fff;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>